<template>
  <div class="x-bar" :id="chartId"></div>
</template>

<script>
import yangjiang from '../util/yangjiang.json'
export default {
  props: {
    chartId: {
      type: String
    }
  },
  data() {
    return {
      chart: "",
      option: {
        geo: {
          map: 'yangjiang',
          aspectScale: 0.9,
          label: {
            emphasis: {
              show: false
            }
          },
          zoom: 1.2,
          roam: false,
          itemStyle: {
            normal: {
              areaColor: '#002a64',
              borderColor: '#002a64'
            },
            emphasis: {
              areaColor: '#002a64'
            }
          }
        }
      }
    };
  },
  methods: {
    init() {
      this.$echarts.registerMap('yangjiang', yangjiang);
      this.chart = this.$echarts.init(document.getElementById(this.chartId));
      this.chart.setOption(this.option);
      window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted() {
    this.init();
  }
};
</script>

<style lang="stylus" scoped>
.x-bar {
  position absolute
  top 32px 
  left 9px
  width: 100%;
  height: 90%;
}
</style>
